<template>
    <div>
        <el-card shadow="hover" v-for="(item,index) in dataList" :key="item.groupId" style="margin-top:10px;position:relative;">
            <div style="font-weight:bold">
                {{item.eventName}}0001
                <div class="item-wrap" v-for="children in item.children" :key="children.eventId">
                   
                    <div class="value" v-if="children.component=='datetime'">
                        <el-date-picker
                            v-model="children.value"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            @change="handleChange"
                            v-if="children.component=='datetime'"
                            type="datetime"
                            placeholder="请选择"
                        />
                    </div>
                </div>
            </div>

            <div class="ipt-wrap">

                <div class="item-wrap" v-for="children in item.children" :key="children.eventId">
                    <div class="label" v-if="children.component!='datetime'&&children.eventName!='不显示'">{{children.eventName}}：</div>
                    <div class="value" v-if="children.component!='datetime'">
                        <el-input @change="handleChange" v-if="children.component=='input'" v-model="children.value"  :placeholder="children.eventName" />
                        <el-select @change="handleChange" style="width:200px" v-if="children.component=='select'" v-model="children.value" placeholder="请选择">
                            <el-option
                                v-for="childrenInner in children.children"
                                :key="childrenInner.eventId"
                                :label="childrenInner.eventName"
                                :value="childrenInner.eventId+''"
                            />
                        </el-select>

                        <el-checkbox-group style="margin-right:5px" v-model="children.value"  @change="handleChange"  v-if="children.component=='checkbox'">
                          <el-checkbox  v-for="childrenInner in children.children"
                                :key="childrenInner.eventId"
                                :label="childrenInner.eventName"
                                :value="childrenInner.eventId" />
                        </el-checkbox-group>
                    </div>
                </div>

            </div>

            <div class="del-wrap">
              <el-button type="danger" link @click="delItem(item,index)">
                删除
              </el-button>
            </div>

        </el-card>

        <el-row style="margin-top:10px">
          <el-col :span="24">
            <el-button type="primary" style="width:100%" plain @click="addItem">新增</el-button>
          </el-col>
          <!-- <el-col :span="12">
            <el-button type="primary" style="width:100%" >保存</el-button>
          </el-col> -->
        </el-row>
    </div>
  </template>
  
  <script setup name="templateone">
    import useSurgeryingStore from '@/store/modules/surgerying'
    import { v4 as uuidv4 } from 'uuid';
 
    // 生成一个随机UUID
    const randomId = uuidv4();
    
   
    
    const props = defineProps({
      dataListProps: {
          type: Object,
          default: []
      },
      templateInfo:{
        type:Object,
        default:{}
      }
  })
  console.log("==================")
  console.log(props.dataListProps);
  console.log(props.templateInfo);
  console.log("==================")
  const { proxy } = getCurrentInstance();


  const loading = ref(true);

  const dataList = ref([]);
  
  if(props.dataListProps.length==0){
   addItem()
  }


  function addItem(){
    dataList.value.push({
      local:true,
      startTime:'',
      endTime:'',
      surgeryId:useSurgeryingStore().getSurgerying.surgeryId,
      eventId:props.templateInfo.eventId,
      eventName:props.templateInfo.eventName,
      children:JSON.parse(JSON.stringify(props.templateInfo.children))
    })
  }

  function delItem(item,index){
    dataList.value.splice(index,1)
  }

  function handleChange(){
    for(let i=0;i<dataList.value.length;i++){
      for(let j=0;j<dataList.value[i].children.length;j++){
        dataList.value[i].children[j].surgeryId=useSurgeryingStore().getSurgerying.surgeryId;
        dataList.value[i].children[j].groupId=dataList.value[i].groupId
      }
    }
    useSurgeryingStore().setEditingSurgery(dataList.value);
  }



  
  // 表单重置
  function reset() {
    form.value = {
      eventId: null,
      eventCode: null,
      eventName: null,
      component: null,
      eventDesc: null,
      unit: null,
      parentId: null,
      fastSort: null,
      isOnly: null,
      isQuickly: null,
      isProcess: null,
      template: null,
      status: null,
      delFlag: null,
      remark: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null,
      processSort: null
    };
    proxy.resetForm("eventmanageRef");
  }
  
  
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }
  

  
  /** 修改按钮操作 */
  async function handleUpdate(row) {
    reset();
    await getTreeselect();
    if (row != null) {
      form.value.parentId = row.parentId;
    }
    getEventmanage(row.eventId).then(response => {
      form.value = response.data;
      open.value = true;
      title.value = "修改事件管理";
    });
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["eventmanageRef"].validate(valid => {
      if (valid) {
        if (form.value.eventId != null) {
          updateEventmanage(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          addEventmanage(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    });
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除事件管理编号为"' + row.eventId + '"的数据项？').then(function() {
      return delEventmanage(row.eventId);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
  
  </script>

<style lang="scss" scoped>

  .del-wrap{
    position:absolute;
    right:10px;
    top:34px;
  }
  .ipt-wrap{
    display:flex;
    margin-top:10px;
    .item-wrap{
        margin-right:4px;
        display:flex;
        align-items:center;
    }
  }

</style>
  